<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">员工</block>
		</cu-custom>
		<view>
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in list" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="cu-avatar round lg bg-green">{{item.username.substr(1,1)}}</view>
					<view class="content">
						<view class="text-grey cuIcon-friend margin-right-xs">{{item.username}}</view>
						<view class="text-gray text-sm">
							<text class="cuIcon-infofill text-red  margin-right-xs"></text> {{item.department_name}}
							<text class="cuIcon-card text-pink margin-right-xs margin-left-xs"></text>{{item.type_name}}
						</view>

					</view>
					<view class="action">
						<!-- <view class="text-grey text-xs">22:20</view> -->
						<view class="cu-tag round bg-grey sm">></view>
					</view>
					<view class="move">
						<view class="bg-grey" @click="weigh(item.id)">置顶</view>
						<view class="bg-red" @click="status(item.id,item.status)">{{item.status==1 ? '禁用' : '启用'}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				list: [],
			}
		},
		onLoad() {
			this.personnel()
		},
		methods: {
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			// 员工
			personnel: async function() {
				let result = await this.$api.personnel({});
				if (result.code == 1) {
					this.list = result.data
				}
			},
			// 员工状态
			status: async function(id, status) {
				let result = await this.$api.personnelstatus({
					id: id,
					status: status
				});
				if (result.code == 1) {
					this.$common.successToShow(result.msg);
					setTimeout(() => {
						this.personnel();
					}, 1500)

				} else {
					this.$common.errorToShow(result.msg);
				}
			},
			// 员工排序
			weigh: async function(id) {
				let result = await this.$api.personnelweigh({
					id: id
				});
				if (result.code == 1) {
					this.$common.successToShow(result.msg);
					setTimeout(() => {
						this.personnel();
					}, 1500)
				} else {
					this.$common.errorToShow(result.msg);
				}
			}
		}
	}
</script>

<style>
</style>
